<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>
    <div id="app">
        <input type="text" v-model='todoValue'>
        <button @click="handleBtnClick">提交</button>
        <ul>
            <!-- 2.全局组件可以直接在模板里使用 -->
            <!-- 3.v-bind向子组件传入内容（绑定值），通过content传 -->
            <!-- 把数组下标也传进去 -->
            <!-- v-bind可以简写为: -->
            <todo-item :content="item" v-bind:index="index" v-for="(item,index) in list" @delete="handleItemDelete">
            </todo-item>
        </ul>
    </div>
    <script>
        // 1.定义一个全局组件
        // Vue.component( "TodoItem", {
        // 4.在子组件中接收绑定的值
        //     props: [ 'content',"index" ],
        //     template: "<li>{{content}}</li>"
        // } )

        // 1.定义局部组件

        var TodoItem = {
            props: [ 'content','index'],
            template: "<li @click='handleItemClick'>{{content}}</li>",
            methods: {
                handleItemClick: function () {
                    // 子组件向父组件传值通过$emit
                   this.$emit("delete",this.index);
                }   
            }
        }
        // 4.去注册局部组件
        var app = new Vue( {
            el: '#app',
            components: {
                TodoItem: TodoItem
            },
            data: {
                list: [],
                todoValue: ''
            },
            methods: {
                handleBtnClick: function () {
                    this.list.push( this.todoValue );
                    this.todoValue = "";
                },
                handleItemDelete:function(index){
                       this.list.splice(index,1);
                }
            }
        } )
    </script>
</body>

</html>